<template>
  <div>
    <div class="container1">
      <div class="common-title-flex">
        <div class="common-title-div"></div>
        <div class="common-title-text">试卷查询条件</div>
      </div>
      <el-form ref="searchObj" :inline="true" :model="searchObj" size="mini" label-width="100px" style="margin-bottom: -10px; margin-top: 10px">
        <el-form-item label="试卷名称">
          <el-input v-model="searchObj.pagerTitle" class="police-name" placeholder="请输入试卷名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="试卷类型">
          <el-select v-model="searchObj.pagerType" placeholder="请选择试卷类型" style="width: 100%">
            <el-option v-for="item in topicTypequeryList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker v-model="createTime" unlink-panels align="right" type="datetimerange" value-format="yyyyMMddHHmmss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="margin-left: 2rem">
          <el-button type="primary" size="mini" icon="el-icon-search" @click="query">查询</el-button>
          <el-button @click="reset" size="mini" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="container" style="margin-top: 1rem">
      <div class="common-list-class">
        <div style="display: flex">
          <div class="common-title-div"></div>
          <div class="common-title-text">试卷查询列表</div>
        </div>
        <div style="display: flex">
          <el-button type="primary" v-if="
              typeCode == 'business' ||
              roleCode == 'policeManage' ||
              roleCode == 'policeResearchLeader'
            " style="height: 32px" icon="el-icon-circle-plus-outline" @click="addPolice">添加</el-button>
        </div>
      </div>
      <!-- 查询列表 -->
      <el-table :data="tableData" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%; margin-top: 10px; margin-bottom: 10px" max-height="550" border>
        <el-table-column prop="pagerTitle" label="试卷名称" width="200" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="pagerType" label="试卷类型" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            {{ pagerTypeObj[scope.row.pagerType] }}
          </template>
        </el-table-column>
        <el-table-column prop="questionNum" label="题目数量" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="videoUrl" label="视频地址" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="二维码" width="200" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-search" @click="queryDetails(scope.row)">查看</el-button>
            <el-button type="success" size="mini" icon="el-icon-download" @click="uploadClick(scope.row)">下载</el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-tickets" @click="detailsClick(scope.row)">详情</el-button>
            <el-button type="primary" size="mini" v-if="
                (scope.row.serviceType == 1 && typeCode == 'business') ||
                (scope.row.serviceType == 0 &&
                  (roleCode == 'policeManage' ||
                    roleCode == 'policeResearchLeader'))
              " icon="el-icon-edit" @click="editClick(scope.row)">编辑地址</el-button>
            <el-button type="danger" size="mini" v-if="
                (scope.row.serviceType == 1 && typeCode == 'business') ||
                (scope.row.serviceType == 0 &&
                  (roleCode == 'policeManage' ||
                    roleCode == 'policeResearchLeader'))
              " icon="el-icon-delete" @click="deleteClick1(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-row>
    </div>
    <el-dialog title="二维码" :visible.sync="pictureFlag" width="30%" :before-close="pictureClose" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">二维码</div>
      </div>
      <div class="pictureUrl_class">
        <img :src="pictureUrl" />
      </div>
    </el-dialog>
    <!-- 新增警员 和修改警员-->
    <el-dialog :title="isEditTitle" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="newaddFlag" width="50%" :before-close="cancel" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">{{ isEditTitle }}</div>
      </div>
      <el-form ref="inputObj" :model="inputObj" label-width="120px">
        <el-form-item label="试卷名称" class="required-content-red">
          <el-input v-model="inputObj.pagerTitle" placeholder="请输入试卷名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="试卷类型" class="required-content-red">
          <el-select v-model="inputObj.pagerType" placeholder="请选择试卷类型" style="width: 100%" @change="topicTypeChange">
            <el-option v-for="item in topicTypeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目总数" class="required-content-red">
          <el-select v-model="inputObj.questionNum" placeholder="请选择题目总数" style="width: 100%" @change="topicNumChange">
            <el-option v-for="item in topicNumList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组卷规则" v-if="inputObj.pagerType == '0'">
          <el-button type="primary" icon="el-icon-plus" class="guize_class" plain @click="addTitleClick">增加题目</el-button>
        </el-form-item>
        <div v-if="inputObj.pagerType == '0'">
          <div v-for="(item, index) in topicList" :key="index">
            <el-form-item :label="item.name" class="topic_class">
              <div style="display: flex; justify-content: space-between">
                <div style="margin-left: 100px">
                  题数：<el-input-number v-model="item.num" controls-position="right" :min="0" :max="item.max"></el-input-number><span style="margin-left: 10px; font-weight: bold">/{{ item.max }}</span>
                </div>
                <div>
                  <el-button icon="el-icon-close" title="删除" @click="deleteTitle(item)" circle></el-button>
                </div>
              </div>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="题目类型" class="required-content-red" v-if="inputObj.pagerType == '1'">
          <div @click="tmlxappendClick">
            <el-input v-model="inputObj.tmlx" placeholder="请选择题目类型" :readonly="true">
              <el-button slot="append" style="color: #409eff" @click="tmlxappendClick" title="选择" icon="el-icon-edit-outline"></el-button>
            </el-input>
          </div>
        </el-form-item>
        <!-- 选择题目 -->
        <div class="select_topic_class" v-if="
            inputObj.pagerType == '1' && inputObj.tmlx && inputObj.tmlx.length
          ">
          <div class="select_topic_left_class">
            <div class="pending_select_title">待选择题目</div>
            <div style="padding: 10px">
              <el-input v-model="inputObj.queryName" @input="queryNameInput" size="mini" placeholder="请输入" clearable>
                <el-button slot="append" style="
                    color: #d3e2fa;
                    background: #409eff;
                    border-bottom-left-radius: 0px;
                    border-top-left-radius: 0px;
                  " @click="queryNameClick" title="查询" icon="el-icon-search"></el-button>
              </el-input>
            </div>
            <div class="pending_select_checked">
              <el-checkbox v-model="allChecked" @change="allCheckedChange">全选</el-checkbox>
            </div>
            <div class="pending_select_checkboxgroup">
              <el-checkbox-group v-model="checkedTitle" @change="handleCheckedTitleChange">
                <el-checkbox v-for="(item, index) in selectTitleList" :title="item.label" :label="item.value" :key="index">{{ item.label }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <div class="select_topic_right_class">
            <div class="has_select_title">已选择题目</div>
            <div class="pending_select_tag">
              <div v-for="(item, index) in tagList" :key="index" class="tagList_for" style="display: flex">
                <div class="pending_select_tag_text" :title="item.label">
                  {{ item.label }}
                </div>
                <i class="el-icon-error error_hover" @click="deleteTagClick(item)" style="color: #f56c6c"></i>
              </div>
            </div>
          </div>
        </div>
        <el-form-item label="试卷分类" class="required-content-red" style="margin-top: 20px">
          <div @click="sjflappendClick">
            <el-input v-model="inputObj.pagerSubject" placeholder="请选择试卷分类" :readonly="true">
              <el-button slot="append" style="color: #409eff" @click="sjflappendClick" title="选择" icon="el-icon-edit-outline"></el-button>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="考试时间(分钟)" class="required-content-red" style="margin-top: 20px">
          <el-input-number v-model="inputObj.reamTime" controls-position="right" style="width: 100%" :min="1" :max="10000000"></el-input-number>
        </el-form-item>
        <el-form-item label="温馨提示">
          <el-input v-model="inputObj.textTip" placeholder="请输入温馨提示" clearable></el-input>
        </el-form-item>
        <el-form-item label="视频地址">
          <el-input v-model="inputObj.videoUrl" placeholder="请输入视频地址" clearable></el-input>
        </el-form-item>
        <el-form-item label="试卷性质">
          <el-radio-group v-model="categoryNature">
            <el-radio :label="1">普通试卷</el-radio>
            <el-radio :label="2">岗前培训试卷</el-radio>
          </el-radio-group>
          <div size="mini" v-if="this.categoryNature=='1'">温馨提示：此试卷所有人都可答题</div>
          <div size="mini" v-if="this.categoryNature=='2'">温馨提示：此试卷需要务工人员信息完善后方可答题</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submit">提 交</el-button>
        <el-button size="mini" @click="cancel">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="组卷规则" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="fenleiFlag" width="40%" :before-close="fenleiClose" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">组卷规则</div>
      </div>
      <el-tree :data="treeList" node-key="id" highlight-current @node-click="handleNodeClick" :props="defaultProps" ref="selectTree" default-expand-all :expand-on-click-node="false">
        <div class="custom-tree-node" style="width: 100%" slot-scope="{ node, data }">
          {{ node.label
          }}<span :style="data.questionNum == 0 ? 'color:red;' : 'color:green;'">（{{ data.questionNum }}）</span>
        </div>
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="fenleiClose">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑视频地址" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="editVideoFlag" width="40%" :before-close="editVideoClose" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">编辑视频地址</div>
      </div>
      <el-form ref="videoObj" :model="videoObj" label-width="120px">
        <el-form-item label="视频地址" class="required-content-red">
          <el-input v-model="videoObj.videoUrl" @input="onInput()" placeholder="请输入视频地址" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="editVideoConfirm">提 交</el-button>
        <el-button size="mini" @click="editVideoClose">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title="题目类型" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="tmlxFlag" width="40%" :before-close="tmlxClose" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">题目类型</div>
      </div>
      <el-tree :data="treetmlxList" node-key="id" highlight-current @node-click="handletmlxNodeClick" :props="defaultProps" ref="selectTree" default-expand-all :expand-on-click-node="false">
        <div class="custom-tree-node" style="width: 100%" slot-scope="{ node, data }">
          {{ node.label
          }}<span :style="data.questionNum == 0 ? 'color:red;' : 'color:green;'">（{{ data.questionNum }}）</span>
        </div>
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="tmlxClose">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title="试卷分类" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="shijuanFlag" width="40%" :before-close="shijuanClose" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">试卷分类</div>
      </div>
      <el-tree :data="treesjList" node-key="id" highlight-current @node-click="handlesjNodeClick" :props="defaultProps" ref="selectTree" default-expand-all :expand-on-click-node="false">
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="shijuanClose">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 题目详情 -->
    <el-dialog title="题目详情" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="detailsFlag" width="40%" :before-close="detailsClose" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">试卷详情</div>
      </div>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">试卷名称</el-col>
        <el-col :span="15" class="grey-class">{{
          detailsObj.pagerTitle
        }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">试卷类型</el-col>
        <el-col :span="15" class="grey-class">{{
          detailsObj.pagerTypeDesc
        }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">创建时间</el-col>
        <el-col :span="15" class="grey-class">{{
          detailsObj.createTime
        }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">试卷分类</el-col>
        <el-col :span="15" class="grey-class">{{
          detailsObj.pagerSubject
        }}</el-col>
      </el-row>
      <el-row type="flex" justify="center" style="margin-bottom: 10px">
        <el-col :span="4" class="bold-class">题目数量</el-col>
        <el-col :span="15" class="grey-class">{{
          detailsObj.questionNum
        }}</el-col>
      </el-row>
      <el-divider>题目详情</el-divider>
      <div v-for="(item, index) in detailsObj.questionList" :key="index">
        <el-row type="flex" justify="center">
          <el-col :span="4" class="bold-class">题目描述{{ index + 1 }}</el-col>
          <el-col :span="15" class="grey-class" :title="item.content" style="
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            ">{{ item.content }}</el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="detailsClose">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixin/mixin.js";
export default {
  name: "policeManage",
  mixins: [mixin],
  data() {
    const self = this;
    return {
      videoObj: {
        videoUrl: "",
      },
      categoryNature: 1,
      editVideoFlag: false,
      pictureFlag: false,
      pictureUrl: "",
      createTime: [],
      tmlxFlag: false,
      treetmlxList: [],
      treesjList: [],
      shijuanFlag: false,
      tagList: [],
      allChecked: false,
      checkedTitle: [],
      selectTitleList: [],
      treeList: [],
      defaultProps: {
        children: "children",
        label: "title",
      },
      fenleiFlag: false,
      topicNumList: [
        {
          value: 5,
          label: 5,
        },
        {
          value: 10,
          label: 10,
        },
        {
          value: 20,
          label: 20,
        },
      ],
      pagerTypeObj: {
        0: "随机试卷",
        1: "固定试卷",
      },
      topicTypequeryList: [
        {
          value: "",
          label: "全部",
        },
        {
          value: 0,
          label: "随机试卷",
        },
        {
          value: 1,
          label: "固定试卷",
        },
      ],
      topicTypeList: [
        {
          value: 0,
          label: "随机试卷",
        },
        {
          value: 1,
          label: "固定试卷",
        },
      ],
      topicList: [],
      areaFlag: false,
      statusObj: {
        0: "已停用",
        1: "已启用",
      },
      bhFlag: false,
      successList: [],
      failList: [],
      daoruFlag: false,
      loading: false,
      uploadHeader: {},
      uploadUrl: "/wgry/police/importedPoliceInfo",
      rules1: {
        gridId: [
          { required: true, message: "请选择所属网格", trigger: "change" },
        ],
        roleId: [{ required: true, message: "请选择角色", trigger: "change" }],
      },
      rules2: {
        gridId: [
          { required: true, message: "请选择所属网格", trigger: "change" },
        ],
      },
      rules: {},
      chooseRoleList: [
        {
          value: "5",
          label: "普通民警",
        },
        {
          value: "4",
          label: "社区民警",
        },
        {
          value: "3",
          label: "公安科所队负责人",
        },
        {
          value: "2",
          label: "综合指挥室",
        },
      ],
      detailsObj: {},
      inputObj: {},
      detailsFlag: false,
      isEditTitle: "",
      newaddFlag: false,
      pageSizes: [10, 15, 50, 100],
      pagesize: 10,
      total: 10,
      currentPage: 1,
      tableData: [],
      searchObj: {},
      selfAreaList: [],
      addselfAreaList: [],
      currentId: "",
      category_level: "",
      category: "",
      allList: [],
    };
  },
  created() {
    this.uploadHeader.Authorization = this.requestToken;
    // this.initSelfAreaList();
    // this.initaddareaList();
    this.query();
  },
  methods: {
    onInput() {
      this.$forceUpdate();
    },
    editVideoConfirm() {
      let self = this;
      if (!self.videoObj.videoUrl || !self.videoObj.videoUrl.length) {
        self.$message.error("请输入视频地址！");
        return;
      }
      self.showLoading();
      self
        .$axios({
          method: "get",
          url: `/questions/editPaperVideoInfo/${self.currentId}/${self.videoObj.videoUrl}`,
          headers: {
            Authorization: self.requestToken,
          },
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.editVideoFlag = false;
            self.videoObj = {};
            self.$message.success(res.data.message);
            self.query();
          } else {
            self.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message.error(err);
        });
    },
    editVideoClose() {
      this.editVideoFlag = false;
      this.videoObj = {};
    },
    queryDetails(row) {
      this.pictureFlag = true;
      this.pictureUrl = `data:image/jpg;base64,${row.imgUrl}`;
    },
    uploadClick(row) {
      this.downloadFile("二维码.png", `data:image/jpg;base64,${row.imgUrl}`);
    },
    downloadFile(fileName, content) {
      let aLink = document.createElement("a");
      let blob = this.base64ToBlob(content); //new Blob([content]);
      let evt = document.createEvent("HTMLEvents");
      evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = fileName;
      aLink.href = URL.createObjectURL(blob);
      aLink.dispatchEvent(
        new MouseEvent("click", {
          bubbles: true,
          cancelable: true,
          view: window,
        })
      ); //兼容火狐
    },
    base64ToBlob(code) {
      let parts = code.split(";base64,");
      let contentType = parts[0].split(":")[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;

      let uInt8Array = new Uint8Array(rawLength);

      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: contentType });
    },
    pictureClose() {
      this.pictureFlag = false;
      this.pictureUrl = "";
    },
    queryNameInput() {
      this.$forceUpdate();
    },
    queryNameClick() {
      let content = this.inputObj.queryName;
      this.initTagList(this.category, this.category_level, content);
    },
    deleteTagClick(val) {
      console.log(val);
      let self = this;

      self.tagList.forEach((item, index) => {
        if (item.value == val.value) {
          self.tagList.splice(index, 1);
        }
      });
      self.checkedTitle.forEach((item, index) => {
        if (item == val.value) {
          self.checkedTitle.splice(index, 1);
        }
      });

      if (self.tagList && self.tagList.length == 0) {
        self.allChecked = false;
      }
    },
    allCheckedChange(value) {
      console.log(value);
      if (value) {
        let list = [];
        this.checkedTitle = this.selectTitleList.map((item) => item["value"]);
        let dataList = JSON.parse(JSON.stringify(this.selectTitleList));
        dataList.forEach((item) => {
          if (
            !this.tagList.map((value) => value["value"]).includes(item.value)
          ) {
            this.tagList.push(item);
          }
        });
      } else {
        this.checkedTitle = [];
        this.selectTitleList.forEach((item, index) => {
          this.tagList.forEach((item1, index1) => {
            if (item.value == item1.value) {
              this.tagList.splice(index1, 1);
            }
          });
        });
      }
    },
    handleCheckedTitleChange(value) {
      let list = [];
      this.allList.forEach((item, index) => {
        this.checkedTitle.forEach((item1) => {
          if (item.value == item1) {
            list.push(item);
          }
        });
      });
      this.tagList = list;
      console.log("checkedTitle---------->:", this.checkedTitle);
      console.log("value------------->:", value);
    },
    // 题目类型选择
    tmlxappendClick() {
      this.inittmlxFenlei();
    },
    inittmlxFenlei() {
      this.showLoading();
      this.$axios({
        method: "get",
        url: `/questions/queryIndexAllSubject`,
        headers: {
          Authorization: this.requestToken,
        },
      })
        .then((res) => {
          this.hideLoading();
          if (res.data.code == "20000") {
            this.tmlxFlag = true;
            this.treetmlxList = res.data.data[0].children;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    initFenlei() {
      this.showLoading();
      this.$axios({
        method: "get",
        url: `/questions/queryIndexAllSubject`,
        headers: {
          Authorization: this.requestToken,
        },
      })
        .then((res) => {
          this.hideLoading();
          if (res.data.code == "20000") {
            this.fenleiFlag = true;
            this.treeList = res.data.data[0].children;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    addTitleClick() {
      let self = this;
      if (self.topicList && self.topicList.length < 5) {
        self.initFenlei();
      } else {
        self.$message.error("最多只能选择五个大类！");
      }
    },
    deleteTitle(val) {
      let self = this;
      self.topicList.forEach((item, index) => {
        if (val.id == item.id) {
          self.topicList.splice(index, 1);
        }
      });
    },
    trueresultChange() {
      this.$forceUpdate();
    },
    fenleiClick() {
      this.fenleiFlag = true;
    },
    fenleiClose() {
      this.fenleiFlag = false;
    },
    topicNumChange(value) {
      this.$forceUpdate();
    },
    topicTypeChange(value) {
      this.$forceUpdate();
    },
    alldaochuClick() {
      let self = this;
      self.showLoading("操作中");
      let params = {
        gridName: this.searchObj.gridName,
        name: this.searchObj.name,
      };
      self
        .$axios({
          method: "post",
          headers: {
            Authorization: self.requestToken,
          },
          url: `/police/exportedPoliceList`,
          responseType: "blob",
          data: params,
        })
        .then((res) => {
          console.log(res);
          self.hideLoading();
          if (res.status == "200") {
            let href = window.URL.createObjectURL(new Blob([res.data]));
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = href;
            link.setAttribute("download", "民警管理导出.xlsx");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(href);
          } else {
            self.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message.error(err);
        });
    },
    gridIdChange() {
      this.$forceUpdate();
    },
    daoruClose() {
      this.daoruFlag = false;
    },
    // 确认
    confirmClick(row) {
      let self = this;
      if (!row.roleId) {
        self.$message({
          message: "请选择角色！",
          type: "error",
        });
        return;
      }
      if (row.roleId == "4" || row.roleId == "5") {
        if (!row.girdName || !row.girdName.length) {
          self.$message({
            message: "请选择所属网格！",
            type: "error",
          });
          return;
        }
      } else {
        if (
          !row.accountName ||
          !row.password ||
          !row.nickName ||
          !row.name ||
          !row.identity ||
          !row.phone
        ) {
          self.$message({
            message: "请输入必填字段再提交！",
            type: "error",
          });
          return;
        }
      }
      let params = row;
      self.showLoading();
      self
        .$axios({
          method: "post",
          url: `/police/validateFailPolice`,
          headers: {
            Authorization: self.requestToken,
          },
          data: params,
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.failList.forEach((item, index) => {
              if (item.id == row.id) {
                self.failList.splice(index, 1);
              }
            });
            self.successList.push(res.data.data);
            self.$message({
              message: "校验成功！",
              type: "success",
            });
          } else {
            self.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message({
            message: err,
            type: "error",
          });
        });
    },
    daoruClick() {
      let self = this;
      let params = self.successList;
      self.showLoading();
      self
        .$axios({
          method: "post",
          url: `/police/addPoliceInfoByImport`,
          headers: {
            Authorization: self.requestToken,
          },
          data: params,
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.daoruFlag = false;
            self.$message({
              message: "提交成功！",
              type: "success",
            });
            self.query();
          } else {
            self.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message({
            message: err,
            type: "error",
          });
        });
    },
    // 删除
    deleteClick(row) {
      let self = this;
      self.failList.forEach((item, index) => {
        if (item.id == row.id) {
          self.failList.splice(index, 1);
        }
      });
      self.$message({
        message: "删除成功！",
        type: "success",
      });
    },
    allExportClick() {
      let url = `${this.modelUrl}民警导入模板.xls`;
      window.open(url);
    },
    initaddareaList() {
      let self = this;
      this.$axios({
        method: "get",
        url: `/police/queryAddInitInfo`,
        headers: {
          Authorization: this.requestToken,
        },
      })
        .then((res) => {
          if (res.data.code == "20000") {
            self.addselfAreaList = res.data.data.grids;
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 初始化所属部门
    initApartmentList() {
      let params = {};
      this.$axios({
        method: "get",
        url: `/police/queryGirdInfo`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          if (res.data.code == "20000") {
            // this.apartmentList
            console.log(res.data);
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return "background-color:#f5f5f5;color:#626262;";
    },
    rowStyle({ row, rowIndex }) {
      let style1 = {};
      let style2 = {};
      if (rowIndex % 2 == 0) {
        style1.background = "#ffffff";
        return style1;
      } else {
        style2.background = "#f5f5f5";
        return style2;
      }
    },
    // 初始化所属责任区
    initSelfAreaList() {
      let params = {};
      this.$axios({
        method: "get",
        url: `/police/queryGirdInfo`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          if (res.data.code == "20000") {
            this.selfAreaList = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    chooseRoleChange3(row) {
      if (row.roleId == "2" || row.roleId == "3") {
        row.girdName = "";
      }
    },
    // 选择角色
    chooseRoleChange(value) {
      if (value == "2" || value == "3") {
        this.inputObj.gridId = "";
      }
    },
    chooseRoleChange1(value) {
      console.log(value);
      if (value == "2" || value == "3") {
        this.inputObj1.gridId = "";
      }
    },
    beforeUpload(file) {
      this.showLoading();
    },
    uploadSucess(response) {
      this.hideLoading();
      if (response.code == "20000") {
        this.daoruFlag = true;
        this.$message({
          message: "导入成功！",
          type: "success",
        });
        this.failList = response.data.failList;
        this.successList = response.data.list;
        console.log("response---->:", response);
      } else {
        this.$message({
          message: response.message,
          type: "error",
        });
      }
    },
    uploadError(error) {
      this.$message({
        message: "导入失败！",
        type: "error",
      });
      this.hideLoading();
      console.log("error-----", error);
    },
    cancel2() {
      this.areaFlag = false;
      this.inputObj2 = {};
      this.$refs["inputObj2"].resetFields();
    },
    // 新建确认和修改确认
    submit() {
      let self = this;
      if (!self.inputObj.pagerTitle || !self.inputObj.pagerTitle.length) {
        self.$message.error("请输入试卷名称！");
        return;
      }
      // 为0随机  为1固定
      if (self.inputObj.pagerType == 0) {
        let num = 0;
        self.topicList.forEach((item) => {
          num += item.num;
        });
        if (num != self.inputObj.questionNum) {
          self.$message.error(`请保证题目数为${self.inputObj.questionNum}`);
          return;
        }
        if (!self.inputObj.pagerSubject || !self.inputObj.pagerSubject.length) {
          self.$message.error("请选择试卷分类！");
          return;
        }
        if (!self.inputObj.reamTime) {
          self.$message.error("请输入考试时间！");
          return;
        }
        if (!self.inputObj.textTip || !self.inputObj.textTip.length) {
          self.$message.error("请输入温馨提示！");
          return;
        }

        let params = {
          pagerTitle: self.inputObj.pagerTitle,
          pagerType: self.inputObj.pagerType,
          questionNum: self.inputObj.questionNum,
          pagerSubject: self.inputObj.pagerSubject,
          reamTime: self.inputObj.reamTime,
          textTip: self.inputObj.textTip,
          videoUrl: self.inputObj.videoUrl,
          categoryNature: self.categoryNature,
        };
        if (self.topicList && self.topicList.length == 1) {
          params.categoryOne = self.topicList[0].id;
          params.weightOne = self.topicList[0].num;
          params.categoryOneLevel = self.topicList[0].level;
        } else if (self.topicList && self.topicList.length == 2) {
          params.categoryOne = self.topicList[0].id;
          params.weightOne = self.topicList[0].num;
          params.categoryOneLevel = self.topicList[0].level;

          params.categoryTwo = self.topicList[1].id;
          params.weightTwo = self.topicList[1].num;
          params.categoryTwoLevel = self.topicList[1].level;
        } else if (self.topicList && self.topicList.length == 3) {
          params.categoryOne = self.topicList[0].id;
          params.weightOne = self.topicList[0].num;
          params.categoryOneLevel = self.topicList[0].level;

          params.categoryTwo = self.topicList[1].id;
          params.weightTwo = self.topicList[1].num;
          params.categoryTwoLevel = self.topicList[1].level;

          params.categoryThree = self.topicList[2].id;
          params.weightThree = self.topicList[2].num;
          params.categoryThreeLevel = self.topicList[2].level;
        } else if (self.topicList && self.topicList.length == 4) {
          params.categoryOne = self.topicList[0].id;
          params.weightOne = self.topicList[0].num;
          params.categoryOneLevel = self.topicList[0].level;

          params.categoryTwo = self.topicList[1].id;
          params.weightTwo = self.topicList[1].num;
          params.categoryTwoLevel = self.topicList[1].level;

          params.categoryThree = self.topicList[2].id;
          params.weightThree = self.topicList[2].num;
          params.categoryThreeLevel = self.topicList[2].level;

          params.categoryFour = self.topicList[3].id;
          params.weightFour = self.topicList[3].num;
          params.categoryFourLevel = self.topicList[3].level;
        } else if (self.topicList && self.topicList.length == 5) {
          params.categoryOne = self.topicList[0].id;
          params.weightOne = self.topicList[0].num;
          params.categoryOneLevel = self.topicList[0].level;

          params.categoryTwo = self.topicList[1].id;
          params.weightTwo = self.topicList[1].num;
          params.categoryTwoLevel = self.topicList[1].level;

          params.categoryThree = self.topicList[2].id;
          params.weightThree = self.topicList[2].num;
          params.categoryThreeLevel = self.topicList[2].level;

          params.categoryFour = self.topicList[3].id;
          params.weightFour = self.topicList[3].num;
          params.categoryFourLevel = self.topicList[3].level;

          params.categoryFive = self.topicList[4].id;
          params.weightFive = self.topicList[4].num;
          params.categoryFiveLevel = self.topicList[4].level;
        }
        console.log(params);
        self.showLoading();
        self
          .$axios({
            method: "post",
            url: `/questions/addRandomPaper`,
            headers: {
              Authorization: self.requestToken,
            },
            data: params,
          })
          .then((res) => {
            self.hideLoading();
            console.log("res-----", res);
            if (res.data.code == "20000") {
              self.newaddFlag = false;
              self.$message({
                message: res.data.message,
                type: "success",
              });
              self.inputObj = {};
              self.tagList = [];
              self.allList = [];
              self.allChecked = false;
              self.selectTitleList = [];
              self.checkedTitle = [];
              self.topicList = [];
              self.categoryNature = 1;
              self.query();
            } else {
              self.$message({
                message: res.data.message,
                type: "error",
              });
            }
          })
          .catch((err) => {
            self.hideLoading();
            self.$message({
              message: err,
              type: "error",
            });
          });
      } else {
        if (!self.tagList || !self.tagList.length) {
          self.$message.error(`请选择题目！`);
          return;
        }
        if (self.tagList.length != self.inputObj.questionNum) {
          self.$message.error(`请保证题目数为${self.inputObj.questionNum}`);
          return;
        }
        if (!self.inputObj.pagerSubject || !self.inputObj.pagerSubject.length) {
          self.$message.error("请选择试卷分类！");
          return;
        }
        if (!self.inputObj.reamTime) {
          self.$message.error("请输入考试时间！");
          return;
        }
        if (!self.inputObj.textTip || !self.inputObj.textTip.length) {
          self.$message.error("请输入温馨提示！");
          return;
        }
        let params = {
          pagerTitle: self.inputObj.pagerTitle,
          pagerType: self.inputObj.pagerType,
          questionNum: self.inputObj.questionNum,
          pagerSubject: self.inputObj.pagerSubject,
          questionIds: self.tagList.map((value) => value["value"]),
          reamTime: self.inputObj.reamTime,
          textTip: self.inputObj.textTip,
          videoUrl: self.inputObj.videoUrl,
        };
        self.showLoading();
        self
          .$axios({
            method: "post",
            url: `/questions/addRandomPaper`,
            headers: {
              Authorization: self.requestToken,
            },
            data: params,
          })
          .then((res) => {
            self.hideLoading();
            if (res.data.code == "20000") {
              self.newaddFlag = false;
              self.$message({
                message: res.data.message,
                type: "success",
              });
              self.inputObj = {};
              self.tagList = [];
              self.allList = [];
              self.allChecked = false;
              self.selectTitleList = [];
              self.checkedTitle = [];
              self.topicList = [];
              self.query();
            } else {
              self.$message({
                message: res.data.message,
                type: "error",
              });
            }
          })
          .catch((err) => {
            self.hideLoading();
            self.$message({
              message: err,
              type: "error",
            });
          });
      }
    },
    shijuanClose() {
      this.shijuanFlag = false;
    },
    sjflappendClick() {
      this.initsjFenlei();
    },
    initsjFenlei() {
      this.showLoading();
      this.$axios({
        method: "get",
        url: `/questions/queryIndexAllSubject`,
        headers: {
          Authorization: this.requestToken,
        },
      })
        .then((res) => {
          this.hideLoading();
          if (res.data.code == "20000") {
            this.shijuanFlag = true;
            this.treesjList = res.data.data[0].children;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    handlesjNodeClick(data) {
      this.inputObj.pagerSubject = data.title;
      this.shijuanFlag = false;
    },
    handletmlxNodeClick(data) {
      if (data.questionNum == 0) {
        this.$message.error("当前题库无题目！请选择其他分类！");
      } else {
        this.inputObj.tmlx = data.title;
        this.category = data.id;
        this.category_level = data.level;
        this.inputObj.queryName = "";
        this.allChecked = false;
        let content = "";
        this.initTagList(this.category, this.category_level, content);
      }

      console.log(data);
    },
    initallTagList() {
      let params = {
        category: "",
        category_level: "",
        content: "",
      };
      this.showLoading();
      this.$axios({
        method: "post",
        url: `/questions/queryQuestionList`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          this.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            let dataList = res.data.data;
            let list = [];
            dataList.forEach((item) => {
              list.push({
                value: item.id,
                label: item.content,
              });
            });
            this.allList = list;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    initTagList(category, category_level, content) {
      let params = {
        category: category,
        category_level: category_level,
        content: content,
      };
      this.showLoading();
      this.$axios({
        method: "post",
        url: `/questions/queryQuestionList`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          this.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            this.tmlxFlag = false;
            let dataList = res.data.data;
            let list = [];
            dataList.forEach((item) => {
              list.push({
                value: item.id,
                label: item.content,
              });
            });
            this.selectTitleList = list;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    tmlxClose() {
      this.tmlxFlag = false;
    },
    handleNodeClick(data) {
      console.log(data);
      // this.fenleiFlag = false;
      if (data.questionNum == 0) {
        this.$message.error("当前题库无题目！请选择其他分类！");
      } else {
        this.topicList.push({
          name: data.title,
          num: 0,
          level: data.level,
          id: data.id,
          max: data.questionNum,
        });
        this.fenleiFlag = false;
      }
    },
    // 取消点击
    cancel() {
      this.newaddFlag = false;
      this.inputObj = {};
      this.tagList = [];
      this.allList = [];
      this.allChecked = false;
      this.selectTitleList = [];
      this.topicList = [];
      this.checkedTitle = [];
      this.$refs["inputObj"].resetFields();
    },
    cancel1() {
      this.bhFlag = false;
      this.inputObj1 = {};
      this.$refs["inputObj1"].resetFields();
    },
    // 点击分页当前页多少数据
    handleSizeChange(val) {
      this.pagesize = val;
      this.query();
    },
    // 点击分页页数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.query();
    },
    // 查询
    query() {
      let startTime = "";
      let endTime = "";
      if (this.createTime && this.createTime.length) {
        startTime = this.createTime[0];
        endTime = this.createTime[1];
      } else {
        startTime = "";
        endTime = "";
      }
      let params = {
        pagerTitle: this.searchObj.pagerTitle,
        pagerType: this.searchObj.pagerType,
        startTime: startTime,
        endTime: endTime,
        pageNumber: this.currentPage,
        pageSize: this.pagesize,
      };
      this.showLoading();
      this.$axios({
        method: "post",
        url: `/questions/queryPaperPageList`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          this.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            this.tableData = res.data.data.list;
            this.pagesize = res.data.data.pageSize;
            this.currentPage = res.data.data.pageNumber;
            this.total = res.data.data.total;
          } else if (res.data.code == "30002") {
            this.$router.push("/login");
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    //  点击重置
    reset() {
      this.searchObj = {};
      this.createTime = [];
      this.query();
    },
    // 启用
    startClick(row) {
      let self = this;
      this.$confirm("请确认是否启用该民警?", "启用", {
        confirmButtonText: "是",
        cancelButtonText: "否",
      })
        .then(() => {
          self.showLoading();
          self
            .$axios({
              method: "get",
              url: `/police/editOpenStatus/${row.userId}/1`,
              headers: {
                Authorization: self.requestToken,
              },
            })
            .then((res) => {
              self.hideLoading();
              if (res.data.code == "20000") {
                self.$message.success("启用成功！");
                self.query();
              } else {
                self.$message.error(res.data.message);
              }
            })
            .catch((err) => {
              self.hideLoading();
              self.$message.error(err);
            });
        })
        .catch(() => {
          self.$message({
            type: "info",
            message: "已取消启用",
          });
        });
    },
    // 删除
    deleteClick1(row) {
      this.$confirm("请确认是否删除该试卷?", "删除", {
        confirmButtonText: "是",
        cancelButtonText: "否",
      })
        .then(() => {
          this.showLoading();
          this.$axios({
            method: "delete",
            url: `/questions/editPaperInfoById/${row.id}`,
            headers: {
              Authorization: this.requestToken,
            },
          })
            .then((res) => {
              this.hideLoading();
              if (res.data.code == "20000") {
                this.$message.success("删除成功！");
                this.query();
              } else {
                this.$message.error(res.data.message);
              }
            })
            .catch((err) => {
              this.hideLoading();
              this.$message.error(err);
            });
        })
        .catch(() => {
          console.log("取消删除");
        });
    },
    // 停用
    forbidClick(row) {
      let self = this;
      this.$confirm("请确认是否停用该民警?", "停用", {
        confirmButtonText: "是",
        cancelButtonText: "否",
      })
        .then(() => {
          self.showLoading();
          self
            .$axios({
              method: "get",
              url: `/police/editOpenStatus/${row.userId}/0`,
              headers: {
                Authorization: self.requestToken,
              },
            })
            .then((res) => {
              self.hideLoading();
              if (res.data.code == "20000") {
                self.$message.success("禁用成功！");
                self.query();
              } else {
                self.$message.error(res.data.message);
              }
            })
            .catch((err) => {
              self.hideLoading();
              self.$message.error(err);
            });
        })
        .catch(() => {
          self.$message({
            type: "info",
            message: "已取消停用",
          });
        });
    },
    // 点击新增
    addPolice() {
      this.newaddFlag = true;
      this.isEditTitle = "新增";
      this.initallTagList();
      this.inputObj.pagerType = 0;
      this.inputObj.questionNum = 5;
    },
    // 点击详情展示
    detailsClick(row) {
      let self = this;
      self.showLoading();
      self
        .$axios({
          method: "get",
          url: `/questions/queryPaperInfoById/${row.id}`,
          headers: {
            Authorization: self.requestToken,
          },
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.detailsFlag = true;
            self.detailsObj = res.data.data;
            self.detailsObj.pagerTypeDesc =
              self.detailsObj.pagerType == 0 ? "随机试卷" : "固定试卷";
          } else {
            self.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message.error(err);
        });
    },
    // 详情关闭
    detailsClose() {
      this.detailsFlag = false;
    },
    // 变更辖区
    editareaClick(row) {
      let self = this;
      self.currentId = row.userId;
      self.showLoading();
      self
        .$axios({
          method: "get",
          url: `/police/queryPoliceInfoById/${row.id}`,
          headers: {
            Authorization: self.requestToken,
          },
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.areaFlag = true;
            self.inputObj2.gridId = res.data.data.gridId;
          } else {
            self.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message.error(err);
        });
    },
    // 点击修改展示
    editClick(row) {
      console.log("row-----", row);
      let self = this;
      self.editVideoFlag = true;
      self.currentId = row.id;
      self.videoObj.videoUrl = row.videoUrl;
      // self.showLoading();
      // self.$axios({
      //     method: 'get',
      //     url: `/police/queryPoliceInfoById/${row.id}`,
      //     headers:{
      //         Authorization:self.requestToken
      //     }
      // }).then(res => {
      //     self.hideLoading();
      //     if(res.data.code == '20000'){
      //         self.inputObj1 = res.data.data;
      //     }else{
      //         self.$message.error(res.data.message)
      //     }
      // }).catch(err => {
      //     self.hideLoading();
      //     self.$message.error(err)
      // })
    },
  },
};
</script>
<style scoped>
/* .el-switch__core:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    border-radius: 100%;
    transition: all .3s;
    width: 16px;
    height: 16px;
    background-color: #fff;
  }
  .el-switch.is-checked .el-switch__core:after {
    left: 100%;
    margin-left: -17px;
  } */
.common-title-flex {
  display: flex;
}
.common-title-div {
  width: 3px;
  height: 16px;
  background-color: #368af7;
  margin-top: 2px;
}
.common-title-text {
  margin-left: 4px;
  font-size: 14px;
}
.common-list-class {
  display: flex;
  justify-content: space-between;
  margin-top: -10px;
}
.upload-file >>> .el-upload--text {
  border: none;
  width: 100px;
  height: 36px;
}
.gridName_select_class >>> .el-input__inner {
  width: 200px;
}
.guize_class {
  width: 100% !important;
}
.topic_class >>> .el-form-item__label {
  color: #409eff;
}
.select_topic_class {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.tagList_for {
  display: flex;
  align-items: center;
}
.error_hover {
  cursor: pointer;
}
.error_hover:hover {
  opacity: 0.8;
}
.pending_select_tag .pending_select_tag_text {
  margin: 3px 8px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 150px;
  font-size: 12px;
}
.pending_select_tag {
  margin-left: 10px;
  height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
}
.pending_select_checkboxgroup {
  margin-left: 10px;
  height: 185px;
  overflow-y: auto;
  overflow-x: hidden;
}
.pending_select_checkboxgroup >>> .el-checkbox__label {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 150px;
  position: relative;
  top: 6px;
  font-size: 12px !important;
}
.pending_select_checked >>> .el-checkbox__label {
  font-size: 12px;
}
.pending_select_checked {
  margin-left: 10px;
}
.pending_select_title {
  height: 20px;
  line-height: 20px;
  background: #f9f9f9;
  font-weight: bold;
  text-align: center;
  padding: 8px;
  border-bottom: 1px solid #e6e6e6;
  font-size: 13px;
}
.has_select_title {
  font-size: 13px;
  height: 20px;
  line-height: 20px;
  background: #f9f9f9;
  font-weight: bold;
  text-align: center;
  padding: 8px;
  border-bottom: 1px solid #e6e6e6;
}
.select_topic_left_class {
  width: 30%;
  height: 300px;
  border: 1px solid #e6e6e6;
}
.select_topic_right_class {
  width: 30%;
  height: 300px;
  border: 1px solid #e6e6e6;
}
.pictureUrl_class {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>